<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Chat IO</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
  </head>
  <body>
    <a href="https://github.com/OmarElGabry/chat.io" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <div class="container clearfix" style="width: 500px;">
      <div class="controls" style="border: none; width: 100%;">
          <a href="/logout" class="logout-btn" style="width: auto; padding: 13px; font-size: 12px;">Logout</a>
      </div>

      <div class="room" style="width: 100%;">
        <div class="room-header clearfix">
          <div class="room-about">
            <div class="room-title">Rooms</div>
            <div class="room-num-rooms"><%= rooms.length %> Room(s)</div>
          </div>
          <i class="fa fa-th-list"></i>
        </div> <!-- end room-header -->
        
        <div class="room-create clearfix" style="border-bottom: 2px solid white;">
          <input type="text" name="title" autofocus placeholder ="Type a new room">
          <button>Create</button>
        </div> <!-- end room-create -->

        <div class="room-list">
          <ul>
            <% if(rooms.length > 0) { %>
              <% rooms.forEach(function(room) { %>
                  <a href="/chat/<%= room.id %>">
                    <li class="room-item"><%= (room.title.length > 25? room.title.substr(0, 25) + '...': room.title) %></li>
                  </a>
                <% }); %>
            <% } else { %>
              <p class="message" style="text-align: center; padding: 0; margin: 0;">Create your first room!</p>
            <% } %>
          </ul>
        </div> <!-- end room-list -->
      </div> <!-- end room -->

    </div> <!-- end container -->
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/main.js"></script>
    <script>$(function(){app.rooms()});</script>
  </body>
</html>
